import { ref } from "vue";

// 版本1
function useFetch(url) {
  // 定义好数据
  const isFetching = ref(false);
  const error = ref(null);
  const data = ref(null);

  // 定义一个调用接口的函数，execute
  function execute() {
    // 数据重置
    isFetching.value = true;
    error.value = null;
    data.value = null;

    // 调用接口
    fetch(url)
      .then((response) => response.json())
      .then((result) => {
        // 接口成功
        data.value = result;
      })
      .catch((err) => {
        // 接口失败
        error.value = err;
      })
      .finally(() => {
        // 不管成功还是失败
        isFetching.value = false;
      });
  }

  // 默认执行一次
  execute();

  // 将数据返回给到调用者
  return {
    isFetching,
    error,
    data,
  };
}

export default useFetch;
